<template>
  <div
    class="top"
    :class="isShadow ? 'shadow' : ''"
    :style="{ 'position': position, 'top': offset + 'px', 'z-index': zIndex }"
  >
    <div class="main nav flex align-center justify-between">
      <div>
        <slot></slot>
      </div>
      <div class="flex">
        <div class="flex align-center justify-end title">
          <router-link :to="{ path: '/' }" tag="span">首页</router-link>
          <router-link :to="{ path: 'project' }" tag="span">项目展示</router-link>
          <router-link :to="{ path: 'news' }" tag="span">博客</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    position: {
      type: String,
      default: "relative",
    },
    offset: {
      type: Number,
      default: 0,
    },
    zIndex: {
      type: Number,
      default: 100,
    },
    isShadow: {
      type: Boolean,
      default: false,
    },
  },
  name: "NavBar",
  data() {
    return {
      logo: require("@/assets/logo.png"),
      title: ["首页", "企业概述", "企业动态", "新闻资讯", "关于我们"],
    };
  },
  methods: {
    login() {
      this.$router.push("/login");
    },
    home() {
      this.$router.push("/");
    },
  },
};
</script>
<style scoped>
.top {
  width: 100%;
  position: relative;
  background: #ffffff;
}
.shadow {
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
}
.nav {
  height: 60px;
}
.title {
  font-size: 16px;
  margin-left: 50px;
}
.title span {
  margin-right: 50px;
  cursor: pointer;
}
.title span:hover {
  color: #1e9fff;
}
.router-link-exact-active {
  color: #1e9fff;
  position: relative;
}
.router-link-exact-active::after{
  content: '';
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 2px;
  background: #1e9fff;
  bottom: -10px;
  left: 0;
}
.logo {
  width: 121px;
  height: 49px;
}
.login {
  font-size: 16px;
  cursor: pointer;
}
.login .img {
  width: 18px;
  height: 18px;
  margin: auto 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #02b2b5;
  display: flex;
  margin-right: 5px;
}
.login .img img {
  width: 16px;
  height: 16px;
  margin: auto;
}
</style>